<!--
 * @FileDescription 选择模块页面
 * @Author lz
 * @Date 20230131 18:34:01
 * @LastEditors lz
 * @LastEditTime 20230131 18:34:01
-->
<template>
  <div class="blankBox">
    <!-- 选项列表 -->
    <div class="ask_box ask">
      <div class="tit">主考官</div>
      <div class="content">请将下列名称拖入到对应的部件框里。</div>
    </div>
    <div class="ListOptions" v-if="data.Destroy">
      <div v-if="data.RefreshType">
        <div
          class="box"
          v-for="(item, index) in MenuIndexData.Default.OptionLabel.value"
          v-drag.offset.clamp
          drag-trigger
          @mousedown="press(item.Name)"
          @mouseup="rise"
          :key="item.InstanceId"
        >
          {{ item.Name }}
        </div>
      </div>
    </div>
    <dragBox
      :remId="data.rem"
      @removeData="Operated"
      @DelOperaLab="Del(item.Name)"
      @verify="hand"
      v-for="(item, index) in MenuIndexData.Default.LabelDataList.value"
      :Name="item.Name"
      :indexs="index"
      :Keys="item.InstanceId"
      :Length="item.Length"
      :ViewportPointX="item.ViewportPointX + '%'"
      :ViewportPointY="item.ViewportPointY + '%'"
      :Direction="item.Direction"
      :key="item.InstanceId"
      @click="Select(item.InstanceId)"
    >
    </dragBox>

    <div class="submit Btn" @click="submit()">提交</div>
  </div>
</template>

<script setup lang="ts">
import HomeContent from "../../HomeContent";
import dragBox from "./dragBox.vue";
import MenuIndexData from "../../menu/MenuIndex";
import simulationData from "../simulationTraining";
import {
  reactive,
  ref,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onUnmounted,
  StyleValue,
  defineProps,
  defineEmits,
  watch,
} from "vue";
import HighlighterComponent from "@runtime/UnityEngineBridge/HighlighterComponent";
const data = reactive({
  rem: "",
  remName: "",
  Destroy: true,
  RefreshType: true,
  styleStatus: 1,
  RecordID: -1,
});

const emit = defineEmits(["doSth"]);

// 触发提交
function submit() {
  simulationData.Default.TriggerValue.value = !simulationData.Default.TriggerValue.value;

  setTimeout(() => {
    conArr();
  }, 250);

  setTimeout(() => {
    let newValuesList: any[] = [...newArr.value.values()];
    console.log("11111111111111111111111111", newValuesList);
    for (var i = 0; i < newValuesList.length; i++) {
      if (newValuesList[i] == false) {
        emit("doSth", false);
        break;
      }
      if (
        newValuesList[i] == true &&
        i + 1 == MenuIndexData.Default.LabelDataList.value.length
      ) {
        emit("doSth", true);
      }
    }
  }, 500);
}

// 高亮点击
async function Select(val: number) {
  if (val == data.RecordID) {
    // 清除高亮
    await HighlighterComponent.Default.ClearAsync();
    data.RecordID = -1;
  } else if (val != data.RecordID) {
    // 清除高亮
    await HighlighterComponent.Default.ClearAsync();
    // console.log(val, '获得的id');
    let id: Array<number> = [val];
    await HighlighterComponent.Default.UpdateAsync(id);
    data.RecordID = val;
  }
}

function press(val: string) {
  data.rem = val;
  console.log("点击");
}

function rise() {
  if (data.rem != "") {
    data.RefreshType = false;
    setTimeout(() => {
      data.RefreshType = true;
    }, 70);
  }
  data.rem = "";
  console.log("取消");
}
//拖入
function Operated(val: string) {
  data.rem = "";
  MenuIndexData.Default.OptionLabel.value.forEach((item, index) => {
    if (val == item.Name) {
      MenuIndexData.Default.OptionLabel.value.splice(index, 1);
    }
  });
}
//删除
function Del(val: string) {
  MenuIndexData.Default.LabelDataList.value.forEach((i) => {
    if (i.Name == val) {
      MenuIndexData.Default.OptionLabel.value.push(i);
    }
  });
}
// 存贮题目信息

let conArrlist: Array<any> = [];
function conArr() {
  conArrlist = [];
  MenuIndexData.Default.LabelDataList.value.forEach((item, index) => {
    conArrlist.push({ Name: contentList.value.get(index) });
  });
  simulationData.Default.historyList.set(
    simulationData.Default.subscript.value,
    conArrlist
  );
  // console.log('存贮', simulationData.Default.historyList.get(simulationData.Default.subscript.value));
}

let newArr = ref(new Map());
let contentList = ref(new Map());
//提交校验
function hand(val: boolean, index: number, content: any) {
  console.log("index: ", index, "val: ", val);
  newArr.value.set(index, val);
  contentList.value.set(index, content);
  // console.log(val, index, content, '数据推送', newArr);
}
onMounted(() => {
  if (
    simulationData.Default.trainingDatalist.value[simulationData.Default.subscript.value]
      .IsSubmit
  ) {
    simulationData.Default.historyList
      .get(simulationData.Default.subscript.value)!
      .forEach((item) => {
        MenuIndexData.Default.OptionLabel.value.forEach((j, index) => {
          if (item.Name == j.Name) {
            MenuIndexData.Default.OptionLabel.value.splice(index, 1);
            // console.log('截取数据');
          }
        });
      });
  }
});

//监听切换
watch(
  () => MenuIndexData.Default.OptionLabel.value,
  (newVal, oldVal) => {
    if (newVal != oldVal) {
      newArr.value.clear();
      if (
        simulationData.Default.trainingDatalist.value[
          simulationData.Default.subscript.value
        ].IsSubmit
      ) {
        simulationData.Default.historyList
          .get(simulationData.Default.subscript.value)!
          .forEach((item) => {
            MenuIndexData.Default.OptionLabel.value.forEach((j, index) => {
              if (item.Name == j.Name) {
                MenuIndexData.Default.OptionLabel.value.splice(index, 1);
                // console.log('截取数据');
              }
            });
          });
      }
    }
  }
);
</script>

<style scoped>
.ListOptions {
  float: right;
  width: 256px;
  height: 660px;
  overflow-y: auto;
  margin-top: 190px;
}

.ListOptions::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.ListOptions::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/

  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #45b5ff;
}

.ListOptions::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #123965;
}

.ask_box {
  position: absolute;
  right: 0;
  width: 300px;
  height: 180px;
  background-image: url("/structure/prompt_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ask {
  top: 100px;
}

.tit {
  color: #31f8ff;
  font-size: 28px;
  padding: 10px;
  padding-left: 20px;
  padding-bottom: 0;
  font-family: PangMenZhengDao;
}

.content {
  font-size: 16px;
  padding: 20px;
  padding-top: 0;
  height: 110px;
  overflow-y: auto;
  color: #fff;
}

.content::-webkit-scrollbar {
  display: none;
}

.box {
  text-align: center;
  width: 213px;
  height: 73px;
  background-image: url("/structure/options_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  line-height: 73px;
  background-color: rgba(255, 255, 255, 0.01);
}

.Btn {
  position: absolute;
  font-size: 18px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  line-height: 54px;
  width: 120px;
  height: 54px;
  background-image: url("/structure/btn_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.Btn:hover {
  color: #18ecff;
  background-image: url("/structure/btn_bg_select.png");
}

.submit {
  left: 888px;
  bottom: 90px;
}
</style>
